<template>
	<view class="goodsDetails">
		<TopHead :title="'活动'"></TopHead>
		<view class="conbox">
			<view class="swiperBox">
				<swiper class="index-section-swiper" :indicator-dots="false" indicator-color="#BFCFFD"
					indicator-active-color="#CF712B" circular @change="swiperChange">
					<swiper-item class="swiper-item" v-for="(item,index) in 2" :key="index">
						<image src="../../static/img/banner.png" mode="" class="cell-icon"></image>
					</swiper-item>
				</swiper>
				<view class="dots">{{swiperCurrent + 1}}/{{2}}</view>
			</view>
			
			
			<view class="box1">
				<view class="title1">XXXXX活动</view>
				<view class="orderbox1">
					<text class="leftText"></text>
					<text>商品详情</text>
				</view>
				<view class="details">
					这里市基本信息介绍这里市基本信息介绍，这里市基本信息介绍这里市基本信息介绍，
				</view>
				
				<view class="iteminput">
					<text class="text1">姓 名</text>
					<input class="uni-input ipt" type="text" v-model="newuser" placeholder="请输真实姓名" />
				</view>
				<view class="iteminput">
					<text>手机号码</text>
					<input class="uni-input ipt" type="text" v-model="newuser" placeholder="请输入手机号码" />
				</view>
			</view>

		</view>
		<view class="btnbox">
			<view class="btn">报名</view>
		</view>
	</view>
</template>

<script>
	import TopHead from '../../components/topHead/topHead.vue';
	export default {
		components: {
			TopHead
		},
		data() {
			return {
				swiperCurrent: 0,
				numer: 1, // 数量
				xzList:[
					{title:'冰'},
					{title:'热'},
					 
				],
				xzList2:[
					{title:'不另外加糖'},
					{title:'半糖'},
					{title:'全糖'},
				],
				xzid:0, // 
				xzid2:0, // 
				selected:'', // 已选择
			}
		},
		onLoad(options) {
			console.log('options',options)
			this.init()
		},
		onShow() {

			// this.initData()
		},
		onReachBottom() {
			// 触底分页
			console.log('触底')
			// if (this.total > this.list.length) {
			// 	this.page = parseInt(this.page) + 1
			// }
		},
		methods: {
			init(){
				this.selected=this.xzList[0].title+'、'+this.xzList2[0].title
			},
			// 数据请求示例
			initData() {
				let _this = this;
				_this.$http.fetchData({
					url: '/api/biaoduan',
					method: 'GET',
					data: {},
					success(res) {
						// uni.showToast({
						// 	title: res.message,
						// 	icon: 'none'
						// });
						_this.list = [..._this.list, ...res.data]
						this.total = res.total
						let listData = res.data
						if (res.total == 1) {
							let id = listData[0].id
							let total = this.total
							let paramsStr = `?biaoduan_id=${id}&biaoduanTotal=${total}`
							uni.redirectTo({
								url: `/pages/procedureList/procedureList${paramsStr}`
							})
						}
					}
				})
			},
			// dianhua
			phoneCall(item) {
				uni.makePhoneCall({
					phoneNumber: '023-62433333' //仅为示例
				});
			},
			//图片变化时
			swiperChange(e) {
				// console.log(e)
				this.swiperCurrent = e.detail.current

			},
			// 减少
			reduce() {
				if (this.numer == 1) {
					uni.showToast({
						icon: 'none',
						title: '数量不能少于1',
						duration: 2000
					})
				} else {
					this.numer--
				}
				console.log(this.numer)
			},
			addNum() {
				this.numer++
				console.log(this.numer)
			},
			// 选择
			xuanze(index){
				this.xzid = index
				this.selected=this.xzList[index].title+'、'+this.xzList2[this.xzid2].title
			},
			// 选择2
			xuanze2(index){
				this.xzid2 = index
				this.selected=this.xzList[this.xzid].title+'、'+this.xzList2[index].title
			},

		}
	}
</script>

<style scoped>
	.goodsDetails {
		background: #f3f3f3;
		height: 100%;
		overflow: auto;
	}

	.conbox {
		padding-top: 170rpx;
		padding-bottom: 260rpx;
	}

	.swiperBox {
		position: relative;
	}

	.index-section-swiper {
		width: 100%;
		height: 464rpx;
	}

	.swiper-item {
		width: 100%;
		height: 464rpx;
	}

	.swiper-item .cell-icon {
		width: 100%;
		height: 464rpx;
	}

	.dots {
		background-color: rgba(228, 121, 23, .65);
		border-radius: 120rpx;
		font-size: 32rpx;
		font-family: Microsoft YaHei, Microsoft YaHei-Regular;
		font-weight: 400;
		color: #FFFFFF;
		position: absolute;
		right: 30rpx;
		bottom: 37rpx;
		padding: 8px 50rpx;
	}

	.box1 {
		padding: 30rpx;
		/* background: #fff; */
	}
	.title1 {
		font-size: 28rpx;
		font-family: Microsoft YaHei, Microsoft YaHei-Bold;
		font-weight: 700;
		text-align: center;
		color: #5d4529;
		margin: 40rpx 0;
	}

	.box1 .box1-title1 {
		font-size: 32rpx;
		font-family: Microsoft YaHei, Microsoft YaHei-Bold;
		font-weight: 700;
		color: #5d4529;
	}

	.box1 .box1-title2 {
		font-size: 24rpx;
		font-family: Microsoft YaHei, Microsoft YaHei-Regular;
		font-weight: 400;
		color: #5d4529;
		margin-top: 20rpx;
	}

	.box1-title3 {
		display: flex;
		margin-top: 6rpx;
	}

	.box1-title3>text {
		flex-shrink: 0;
		font-size: 24rpx;
		font-family: Microsoft YaHei, Microsoft YaHei-Regular;
		font-weight: 400;
		color: #f61111;
	}

	.box1-title3 .text-totlo1 {
		line-height: 52rpx;
		vertical-align: middle;
	}

	.box1-title3 .text-totlo2 {
		font-size: 40rpx;
	}

	.sum-view {
		flex: 1;
		text-align: right;
		color: #000;
	}

	.sum-view .add1 {
		width: 34rpx;
		height: 34rpx;
		box-sizing: border-box;
		display: inline-block;
		background: #ffffff;
		border: 2rpx solid #e47917;
		border-radius: 50%;
		font-size: 22rpx;
		font-weight: 400;
		color: #000000;
		text-align: center;
	}

	.sum-view .add2 {
		background: #e47917;
		border: 2rpx solid #e47917;
		color: #fff;
	}

	.sum-view .add {
		display: inline-block;
		width: 50rpx;
		text-align: center;
		vertical-align: middle;
		color: #000;
	}

	/* box2 */
	.box2 {
		margin-top: 22rpx;
		padding-bottom: 48rpx;
	}

	.orderbox1 {
		font-size: 28rpx;
		font-family: Microsoft YaHei, Microsoft YaHei-Bold;
		font-weight: 700;
		color: #e47917;
	}

	.orderbox1 .leftText {
		display: inline-block;
		width: 8rpx;
		height: 36rpx;
		background: #e47917;
		border-radius: 4rpx;
		vertical-align: text-bottom;
		margin-right: 15rpx;
	}
	.text-view {
		padding: 29rpx 0;
	}
	.text-view text {
		display: inline-block;
		width: 200rpx;
		height: 78rpx;
		background: #ededed;
		border: 2rpx solid rgba(189,189,189,0.20);
		border-radius: 42rpx;
		line-height: 78rpx;
		text-align: center;
		color: #000000;
		font-size: 28rpx;
		margin-right: 38rpx;
	}
	.text-view text:last-child {
		margin-right: 0;
	}

	.text-view .active {
		color: #e47917;
		background: #fff0db;
		border: 2rpx solid rgba(228, 121, 23, 0.20);
		border-radius: 42rpx;
	}
	.selected {
		background: #ebebeb;
		border-radius: 20rpx;
		height: 86rpx;
		line-height: 86rpx;
		font-size: 24rpx;
		font-family: Microsoft YaHei, Microsoft YaHei-Regular;
		font-weight: 400;
		color: #000000;
		padding: 0 22rpx;
		box-sizing: border-box;
		margin-top: 60rpx;
	}
	.details {
		padding-top: 30rpx;
		margin-bottom: 20rpx;
	}
	
	
	
	
	/* 按钮 */
	.btnbox {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		padding: 20rpx 75rpx;
		background: #fff;
	}
	.btnbox .btn {
		height: 112rpx;
		background: #e47917;
		border-radius: 10rpx;
		line-height: 112rpx;
		font-size: 32rpx;
		font-family: Microsoft YaHei, Microsoft YaHei-Regular;
		font-weight: 400;
		text-align: center;
		color: #ffffff;
	}
	
	.iteminput {
		position: relative;
		padding-left: 206rpx;
		line-height: 131rpx;
		border-bottom: 2rpx solid rgba(94, 94, 94, 0.1);
	}
	
	.iteminput text {
		line-height: 38rpx;
		position: absolute;
		left: 0;
		top: 50%;
		margin-top: -19rpx;
		font-size: 28rpx;
		font-family: Microsoft YaHei, Microsoft YaHei-Bold;
		font-weight: 700;
		color: #5d4529;
	}
	
	.iteminput .ipt {
		height: 131rpx;
	}
	
	.iteminput .ipt ::placeholder {
		font-size: 28rpx;
		font-family: Microsoft YaHei, Microsoft YaHei-Regular;
		font-weight: 400;
		color: #c2c2c2;
	
	}
	
	.iteminput .text1 {
		letter-spacing: 24rpx;
	}
</style>